<!-- 重疾-必选责任列表 -->
<template>
	<a-modal :title="mdl.title" destroyOnClose :visible="mdl.visibleDutySeriousMust" maskClosable width="1200px"
		@cancel="$emit('done')" @ok="$emit('done')">
		<el-card class="box-card">
			<div slot="header" class="table-page-search-wrapper">
				<a-form layout="inline">
					<a-row :gutter="48">
						<a-col :span="12">
							<a-button icon="plus" style="margin-right: 8px" type="primary" @click="handleAdd">新建</a-button>
              
              <a-upload
                name="file"
                :multiple="false"
                :action="uploadApi"
                :show-upload-list="false"
                :beforeUpload="beforeUpload"
                :customRequest="customRequest"
              >
                <a-button icon="upload" type="default" style="margin-right:8px;">费率表核对</a-button>
              </a-upload>
              
						</a-col>
					</a-row>
				</a-form>
			</div>

			<el-table :data="tableData" border style="width: 100%">
				<el-table-column label="计划书名称" prop="dutyName" align="center" />
				<el-table-column label="费率表名称" prop="recordName" align="center" />
				<el-table-column label="产品对比名称" prop="compareName" align="center" />

				<el-table-column label="责任类型" prop="parentState" align="center">
					<template slot-scope="scope">
						<el-tag v-if="parseInt(scope.row.parentState) === 0">子级</el-tag>
						<el-tag v-else-if="parseInt(scope.row.parentState) === 1">父级</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="所属父级" prop="parentName" align="center" />

				<el-table-column label="是否必选" prop="isMust" align="center">
					<template slot-scope="scope">
						<el-tag v-if="parseInt(scope.row.isMust) === 0">否</el-tag>
						<el-tag v-else-if="parseInt(scope.row.isMust) === 1">是</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="赔付规则" prop="dutyRule" align="center" />
				<el-table-column label="备注信息" prop="dutyMemo" align="center" />
				<el-table-column label="赔付基数是否为保额" prop="isBasePay" align="center">
					<template slot-scope="scope">
						<el-tag v-if="parseInt(scope.row.isBasePay) === 0">否</el-tag>
						<el-tag v-else-if="parseInt(scope.row.isBasePay) === 1">是</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="是否需要计算赔付金额" prop="isCalculatePay" align="center">
					<template slot-scope="scope">
						<el-tag v-if="parseInt(scope.row.isCalculatePay) === 0">否</el-tag>
						<el-tag v-else-if="parseInt(scope.row.isCalculatePay) === 1">是</el-tag>
					</template>
				</el-table-column>

				<el-table-column label="是否限定年龄" prop="dutySexyLimit" align="center">
					<template slot-scope="scope">
						<el-tag v-if="parseInt(scope.row.dutySexyLimit) === 0">否</el-tag>
						<el-tag v-else-if="parseInt(scope.row.dutySexyLimit) === 1">是</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="限定起始年龄" prop="dutySexyLimitMin" align="center" />
				<el-table-column label="限定截止年龄" prop="dutySexyLimitMax" align="center" />
				<!-- <el-table-column label="标签" prop="dutyLabel" align="center" /> -->
				<el-table-column label="排序号" prop="sortOrder" align="center" />
				<el-table-column width="180" label="创建时间" prop="createTime" align="center" />
				<el-table-column width="180" label="更新时间" prop="updateTime" align="center" />
				<el-table-column width="150" fixed="right" align="center" label="操作">
					<template slot-scope="scope">
						<el-link :underline="false" type="primary" @click="handleEdit(scope.row)">编辑</el-link>
						<el-link :underline="false" type="primary" style="margin-left:10px;"
							@click="handleCopy(scope.row)">复制</el-link>
						<el-link :underline="false" type="danger" style="margin-left:10px;"
							@click="handleDelete(scope.row)">删除</el-link>
					</template>
				</el-table-column>
			</el-table>

			<div style="display: flex;justify-content: flex-end;margin: 20px 0 0;">
				<el-pagination :current-page="queryParam.page" :page-size="queryParam.limit" :page-sizes="[10, 20, 50, 100]"
					:total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
					@current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</el-card>

		<!-- 新增/编辑 -->
		<duty-serious-must-edit :modal="modal" @done="handleOk"></duty-serious-must-edit>
	</a-modal>
        
</template>

<script>
	import { listByPage, del, copy } from '@/api/aibao/product/serious'
	import dutySeriousMustEdit from './components/duty-serious-must-edit'

  const baseApi = process.env.VUE_APP_API_BASE_URL
  import axios from 'axios'
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  import storage from 'store'
  import { Modal } from 'ant-design-vue'
  
	export default {
		props: {
			productId: {
				type: String,
				default: ''
			},
			productIndemnifyId: {
				type: String,
				default: ''
			},
			mdl: {
				type: Object,
				default: {}
			},
		},
		components: {
			dutySeriousMustEdit
		},
		data() {
			return {
        uploadApi: baseApi + '/pc/aibaoInsuranceIndemnifyPayRate/batchImportForCheck',
        errorList: [],
				queryParam: {
					page: 1,
					limit: 10,
					productId: '',
					productIndemnifyId: ''
				},
				total: 0,
				modal: {
					visible: false, //新增、编辑
					title: '',
					form: {}
				},
				tableData: [],
			}
		},
		methods: {
			query() {
				this.queryParam.page = 1
				this.getTable()
			},
			handleSizeChange(val) {
				this.queryParam.limit = val
				this.getTable()
			},
			handleCurrentChange(val) {
				this.queryParam.page = val
				this.getTable()
			},

			getTable() {
				this.queryParam.productId = this.productId
				this.queryParam.productIndemnifyId = this.mdl.productIndemnifyId
				listByPage(this.queryParam).then(res => {
					this.tableData = res.data.records
					this.total = parseInt(res.data.total)
				}).catch(() => {})
			},

			handleOk() {
				this.modal.form = {}
				this.modal.visible = false
				this.queryParam.page = 1
				this.getTable()
			},

			handleAdd() {
				this.modal.form = {
					productId: this.productId, //产品id
					// companyId: this.mdl.companyId,
					// productIndemnifyId: this.mdl.productIndemnifyId, //保障期id
					id: '', //必选责任id
				}
				let params = ['dutyName', 'isMust', 'dutyRule', 'dutyMemo', 'isBasePay', 'isCalculatePay',
					'dutySexyLimit', 'compareName', 'parentState', 'parentId',
					'dutySexyLimitMin', 'dutySexyLimitMax', 'sortOrder', 'recordName', 'dutySn'
				]
				params.forEach(v => {
          if(v == 'sortOrder'){
            this.modal.form[v] = '100'
          }else {
            this.modal.form[v] = ''
          }
				})
				this.modal.visible = true
				this.modal.title = '新增'
			},

			handleEdit(record) {
				this.modal.form = {
					productId: this.productId, //产品id
					// productIndemnifyId: this.mdl.productIndemnifyId, //保障期id
					// companyId: record.companyId,
					id: record.id, //必选责任id
				}
				let params = ['dutyName', 'isMust', 'dutyRule', 'dutyMemo', 'isBasePay', 'isCalculatePay',
					'dutySexyLimit', 'parentState', 'parentId', 'compareName',
					'dutySexyLimitMin', 'dutySexyLimitMax', 'sortOrder', 'recordName', 'dutySn'
				]
				params.forEach(v => { this.modal.form[v] = record[v] })
				this.modal.visible = true
				this.modal.title = '编辑'
			},
			handleDelete(record) {
				// 删除，2025年1月18日17:17:04
        Modal.confirm({
          title: '确认要删除？',
          onOk: () => {
            del([record.id]).then(res => {
              this.queryParam.page = 1
              this.getTable()
              this.$message.success('删除成功')
            }).catch(() => {})
          }
        })
			},
      
      // 责任复制，2025年7月16日16:00:43
			handleCopy(record) {
        Modal.confirm({
          title: '确认要复制？',
          onOk: () => {
            copy({id: record.id}).then(res => {
            	this.$message.success('操作成功')
            	this.queryParam.page = 1
            	this.getTable()
            }).catch(() => {})
          }
        })
			},
      
      // 文件上传，2025年7月1日18:03:02
      beforeUpload(){
        // 配置请求参数，2025年4月10日11:21:05
        // console.log('beforeUpload', 111)
      },
      async customRequest({ file, onSuccess, onError }) {
        const formData = new FormData()
        formData.append('file', file)
        formData.append('productId', this.productId)
        try {
          const response = await axios.post(this.uploadApi, formData, {
            headers: {
              'Content-Type': 'multipart/form-data',
              'token': storage.get(ACCESS_TOKEN)
            }
          })
          let res = response.data;
          if(res.code == 0){
             Modal.confirm({
               title: '校验通过',
               content: res.data
             })
          }else {
             Modal.confirm({
               title: '校验失败：' + res.msg,
               content: res.data,
               width: '70%'
             })
          }
          onSuccess(res)
        } catch (error) {
          onError(error)
          this.$message.success('导入失败')
        }
      }
      
		},
		watch: {
			mdl: {
				handler(value) {
					if (value.visibleDutySeriousMust) {
						this.queryParam.productId = this.productId
						// this.queryParam.productIndemnifyId = this.mdl.productIndemnifyId
						this.getTable()
					}
				},
				deep: true
			}
		},
	}
</script>

<style lang="less" scoped>
	.view-video {
		position: relative;

		.close {
			position: absolute;
			right: 15px;
			top: 0;
			cursor: pointer;
		}
	}

	/deep/.ant-modal-body {
		max-height: calc(80vh - 150px);
		overflow-y: auto;

		&::-webkit-scrollbar {
			width: 6px;
			/*高宽分别对应横竖滚动条的尺寸*/
			height: 1px;
		}

		&::-webkit-scrollbar-thumb {
			// -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			background: #e3e3e6;
			border-radius: 6px;
		}

		&::-webkit-scrollbar-track {
			background: transparent;
			// -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			border-radius: 5px;
		}
	}
</style>